<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <include file="public/css" />
</head>
<body>
    <div class="layui-btn-container">
        <a class="layui-btn"  href="{:url('add')}" > <i class="layui-icon">&#xe654;</i>新增</a>
    </div>
    <table class="layui-hide" id="datas" lay-filter="table1"></table>
</body>
<include file="public/js" />

<script type="text/html" id="toolbar">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
</script>

<script>
    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '#datas'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,url:"{:url('lists')}"
            ,cols: [[
                {field:'id',  title: 'ID'}
                ,{field:'name',  title: '分类名称'}
                ,{field:'count', title: '任务数量', sort: true}
                ,{fixed:'right', title: '操作', align:'center',toolbar:'#toolbar'}
            ]],
        });

        //监听工具条
        table.on('tool(table1)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    layer.close(index);
                    var url = "{:url('doDel',[],false)}/ids/"+data.id;
                    api.del(url,layer,obj);
                });
            } else if(layEvent === 'edit'){ //编辑
                location.href = "{:url('edit',[],false)}/id/"+data.id;
            }
        });

    });
</script>
</html>